<script>
export default {
  name: "Product",
  data(){
    return {
      productList:[
        {id: 1001, name: '电脑', price: 12000},
        {id: 1002, name: '大衣', price: 150},
        {id: 1003, name: '鞋子', price: 120},
      ],
    }
  },
  methods:{
    //去商品详情页面
    toProductDetail(id){
      //使用query传参  '/home/ProductDetail?id='+id
      this.$router.push({path:'/home/ProductDetail',query:{id:id}})
    }
  }
}
</script>

<template>
    <h3>商品列表页面</h3>

  <el-table :data="productList" style="width: 100%">
    <el-table-column prop="id" label="编号" width="180" />
    <el-table-column prop="name" label="商品名称" width="180" />
    <el-table-column prop="price" label="价格" width="180" />
    <el-table-column label="操作1" width="220">
      <template #default="scope">
        <el-link type="success" href="javascript:void(0)" @click="toProductDetail(scope.row.id)">查看详情1</el-link>
        |
        <el-link type="success" :href="'/home/productDetail?id='+scope.row.id">查看详情2</el-link>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>

</style>